﻿<template>
  <div class="earthlist">
    <Card shadow class="card">
      <!-- 头部 -->
      <div class="head">
        <div class="head1">
          <Icon type="ios-list-box-outline" size="18"/>
          <span style="position:relative; top:2px; ">地震列表</span>
        </div>
      </div>
      <div class="content">
        <!-- “添加地震”按钮 -->
        <div class="button1">
          <Button @click="modal1 = true">
            <Icon type="md-add"/>添加地震
          </Button>
        </div>
        <!-- 添加地震的弹框 -->
        <Modal v-model="modal1" title="添加地震" @on-ok="ok" @on-cancel="cancel">
          <div>
            <span>日期：</span>
            <DatePicker type="date" confirm placeholder="日期" style="width: 50%"></DatePicker>
          </div>
          <div style="margin-top: 6px">
            <span>地点：</span>
            <Input placeholder="地点" style="width: 50%"/>
          </div>
          <div style="margin-top: 6px">
            <span>震级：</span>
            <Input placeholder="震级" style="width: 50%"/>
          </div>
        </Modal>
        <!-- 地震列表-->
        <Table border :columns="columns7" :data="data6"></Table>
        <!-- 翻页 -->
        <Page :total="1" prev-text="上一页" next-text="下一页"/>
      </div>
    </Card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modal1: false,
      columns7: [
        {
          title: "序号",
          key: "id",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.id)
            ]);
          }
        },
        {
          title: "地点",
          key: "address"
        },
        {
          title: "时间",
          key: "time"
        },
        {
          title: "震级",
          key: "magnitude"
        },
        {
          title: "操作",
          key: "action",
          width: 1300,
          align: "left",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "large"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "地震版本管理"
              ),
              h(
                "Button",
                {
                  props: {
                    size: "large"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    size: "large"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          id: "1",
          address: "河北",
          time: "2019-1-14",
          magnitude: 6.5
        },
        {
          id: "1",
          address: "河北",
          time: "2019-1-14",
          magnitude: 6.5
        }
      ]
    };
  },
  methods: {
    // show (index) {
    //     this.$Modal.info({
    //         title: '更新地震信息',
    //         content: `id：${this.data6[index].id}<br>address：${this.data6[index].address}<br>time：${this.data6[index].time}`
    //     })
    // },
    show(index) {
      this.$Modal.info({
        title: "更新地震信息",
        content: `
                        <div>
                            <span>日期：</span>
                            <Input type="date" confirm placeholder="日期" style="width: 70%"></Input>    
                        </div>
                        <div style="margin-top: 6px">
                            <span>地点：</span>
                            <Input placeholder="地点" style="width: 70%"></Input>
                        </div>
                        <div style="margin-top: 6px">
                            <span>震级：</span>
                            <Input placeholder="震级" style="width: 70%"></Input>
                        </div>  
                    `
      });
    },
    remove(index) {
      this.data6.splice(index, 1);
    }
  }
};
</script>
<style>
.earthlist {
  padding-left: 16px;
  padding-right: 16px;
}
.earthlist .card .head {
  font-size: 13px;
  line-height: 2.5;
  padding-left: 8px;
  /* box-shadow: 0px 2px 3px 0px; */
  box-shadow: 0 0 4px rgba(0, 0, 0, .3);
}
.earthlist .card .head .head1 .icon {
  padding-right: 4px;
}
.earthlist .card .content {
  padding: 12px 10px 10px 10px;
  box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, .3);
}
.earthlist .card .content .button1 {
  margin-bottom: 10px;
  font-size: 13px;
}
.earthlist .card .ivu-card-body {
  padding: 0;
}
.ivu-modal-wrap .ivu-modal .ivu-modal-content {
  width: 520px;
  height: 251.88px;
}
.ivu-modal-wrap .ivu-modal .ivu-modal-content {
  height: 251.88px;
}
.ivu-modal-wrap .ivu-modal .ivu-modal-content .ivu-modal-body {
  line-height: 2;
}
.ivu-modal-wrap .ivu-modal-content .ivu-modal-footer {
  text-align: left;
}
.ivu-modal-wrap
  .ivu-modal-content
  .ivu-modal-body
  .ivu-modal-confirm
  .ivu-modal-confirm-body {
  padding-left: 0px;
}
.ivu-modal-wrap
  .ivu-modal-content
  .ivu-modal-body
  .ivu-modal-confirm
  .ivu-modal-confirm-footer {
  text-align: left;
}
</style>